<template>
  <div>
    <Top />
    <div id="search_keyword">
      <input
        type="text"
        id="txt_keyword"
        v-model="infor"
        placeholder="请输入游戏名称"
      />
      <div id="btn_keyword_search" @click="submit">搜索</div>
    </div>
    <div class="search_keyword_height"></div>
    <van-tree-select
      height="700px"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="handleActve"
    >
      <template #content>
        <div class="module lettershow" id="wrapper2" v-if="active === m">
          <div id="container" class="clearfix pl15">
            <img
              v-if="isActive"
              src="https://m.taoshouyou.com/static/home/static/img/gamelist/loading_c34e539.gif"
              style="
                top: 246.5px;
                left: 149.5px;
                transform-origin: 0px 0px;
                opacity: 1;
                transform: scale(1, 1);
                position: fixed;
              "
            />
            <div class="gamelist game_hot clearfix">
              <div
                class="gamelis_box"
                v-for="(val, index) in games"
                v-show="val.name"
                :key="index"
              >
                <a @click="toLink(val)">
                  <div class="gamelist_imgs clearfix">
                    <img
                      :src="'https://img2.taoshouyou.com' + val.pic"
                      border="0"
                    />
                    <p>{{ val.name }}</p>
                    <div class="gamelist-right">
                      <span>件商品</span><span></span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import {inserch} from '../api/inserch'
import {gamesList} from '../api/gamesList'
import Top from "../components/top";
export default {
  data() {
    return {
      games: [],
      spelling: "hot",
      list_title: [],
      m: 0,
      active: 0,
      items: [],
      infor:''
    };
  },
  components: {
    Top,
  },
  computed: {},
  methods: {
    handleActve(index) {
      this.m = index;

      if (this.spelling != this.list_title[index]) {
        this.spelling = this.list_title[index];
      }
    },
    submit(){
        inserch(this.infor).then((val) => {
        this.isActive = false;
        this.games = val.data;
      });
    },
    toLink(item){
      sessionStorage.gamesType=item.name
      sessionStorage.gamesTag=JSON.stringify({goodsid: "0", goodsparentid: "0", goodsname: "账号",value:-1})
      this.$router.push(`detail/${item.spelling}/${item.id}`)
    }
  },
  watch: {
    spelling() {
      this.isActive = true;
      gamesList(this.spelling).then((val) => {
        this.isActive = false;
        this.games = val.data;
      });
    },
  },
  created() {
    this.isActive = true;
    gamesList(this.spelling).then((val) => {
      this.isActive = false;
      this.games = val.data;
    });
    for (var i = 0; i < 26; i++) {
      this.items.push({ text: String.fromCharCode(65 + i) });
      this.list_title.push(String.fromCharCode(65 + i));
    }
    this.list_title.unshift("hot");
    this.items.unshift({ text: "hot" });
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/public.css");
@import url("../assets/css/gamesList.css");
.module {
  margin-top: 0rem;
}
.van-sidebar-item {
  text-indent: 15px;
}
.clearfix{
  width: 100%;
}
</style>